<template>
  <div class="filter">
    <keep-alive>
    <el-row type="flex" >
      <el-col :span="6" >
        <span>0-400</span>
        <el-slider  v-model="filterPrice" :format-tooltip="formatTooltip" @change="changePrice" :max="400"></el-slider>
      </el-col>
      <el-col :span="5" v-if="filterArrays.levels">
             <div>住宿等级</div>
            <el-dropdown trigger="hover" >
            <span class="el-dropdown-link" >
              {{levelcheckList.length === 0 ? '不限' : levelcheckList.length}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item>
                      <el-checkbox-group v-model="levelcheckList" v-for="(item, index) in filterArrays.levels" :key="item.id" ref='level'>
                          <el-checkbox :label="item.name"  @change="levelTypes(item.id, index)"  style="width:30px" ></el-checkbox>
                       </el-checkbox-group>
                      </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
      </el-col>
       <el-col :span="5" v-if="filterArrays.types">
          <div>住宿类型</div>
            <el-dropdown trigger="hover" >
            <span class="el-dropdown-link" >
               {{typecheckList.length === 0 ? '不限' : typecheckList.length}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown" ref="type">
                    <el-dropdown-item>
                      <el-checkbox-group v-model="typecheckList" v-for="(item, index) in filterArrays.types" :key="item.id" ref="type">
                       <el-checkbox :label="item.name"   @change="typechange(item.id,index)" style="width:60px"></el-checkbox>
                       </el-checkbox-group>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
      </el-col>
      <el-col :span="5" v-if="filterArrays.assets">
          <div>酒店设施</div>
            <el-dropdown trigger="hover" >
            <span class="el-dropdown-link" >
               {{assetcheckList.length === 0 ? '不限' : assetcheckList.length}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown" ref="assets">
                    <el-dropdown-item       >
                      <el-checkbox-group v-model="assetcheckList" v-for="(item, index) in filterArrays.assets" :key="item.id" ref="asset">
                       <el-checkbox :label="item.name"   @change="assetschange(item.id,index)" style="width:60px"></el-checkbox>
                      </el-checkbox-group>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
      </el-col>
      <el-col :span="5"  v-if="filterArrays.brands">
          <div>酒店品牌</div>
            <el-dropdown trigger="hover" >
            <span class="el-dropdown-link" >
               {{brandcheckList.length === 0 ? '不限' : brandcheckList.length}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown" ref="brands">
                    <el-dropdown-item      >
                      <el-checkbox-group v-model="brandcheckList"  v-for="(item, index) in filterArrays.brands" :key="item.id" ref="brand">
                       <el-checkbox :label="item.name"   @change="brandschange(item.id,index)" style="width:60px"></el-checkbox>
                       </el-checkbox-group>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
      </el-col>
    </el-row>
    </keep-alive>

  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      filterPrice: 1500,
      filterArrays: {
        levels: [],
        types: [],
        price: '',
        assets: [],
        brands: []
      },
      level: [],
      type: [],
      assets: [],
      brands: [],
      price: 4000,
      levelcheckList: [],
      typecheckList: [],
      assetcheckList: [],
      brandcheckList: []
    }
  },
  created () {
  },
  methods: {
    init (routeData, arrayData, checked) {
      routeData === undefined ? checked = []
        : arrayData.forEach(item => {
          if (+routeData === item.id) {
            checked.push(item.name)
          } else if (typeof (routeData) !== 'string') {
            routeData.forEach(v => {
              if (item.id === +v) {
                checked.push(item.name)
              }
            })
          }
        })
    },
    filterInit (data) {
      console.log(this.$route.query.hotellevel_in)
      this.init(this.$route.query.hotellevel_in, data.levels, this.levelcheckList)
      this.init(this.$route.query.hoteltype_in, data.types, this.typecheckList)
      this.init(this.$route.query.hotelasset_in, data.assets, this.assetcheckList)
      this.init(this.$route.query.hotelbrand_i, data.brands, this.brandcheckList)
      this.filterPrice = +this.$route.query.price_lt
      // this.$route.query.hotellevel_in.length === undefined ? this.levelcheckList = []
      //   : data.levels.forEach(item => {
      //     console.log(+this.$route.query.hotellevel_in === item.id)
      //     if (+this.$route.query.hotellevel_in === item.id) {
      //       this.levelcheckList.push(item.name)
      //     } else if (typeof (this.$route.query.hotellevel_in) !== 'string') {
      //       this.$route.query.hotellevel_in.forEach(v => {
      //         if (item.id === +v) {
      //           this.levelcheckList.push(item.name)
      //         }
      //       })
      //     }
      //   })
      // data.types.forEach(item => {
      //   this.$route.query.hoteltype_in.forEach(v => {
      //     if (item.id === +v) {
      //       this.typecheckList.push(item.name)
      //     }
      //   })
      // })
      // data.assets.forEach(item => {
      //   if (item.id === +this.$route.query.hotelasset_in) {
      //     this.assetcheckList.push(item.name)
      //   }
      // })
      // data.brands.forEach(item => {
      //   console.log(this.$route.query.hotelbrand_in)
      //   if (item.id === +this.$route.query.hotelbrand_in) {
      //     console.log(item.name)
      //     this.brandcheckList.push(item.name)
      //   }
      // })
    },
    formatTooltip (val) {
      return val
    },
    changePrice (price) {
      this.price = price
      this.$router.push({
        path: '/hotel',
        query: {
          cityName: this.$route.query.cityName,
          price_lt: this.price,
          hoteltype_in: this.$route.query.hoteltype_in,
          hotelasset_in: this.$route.query.hotelasset_in,
          hotelbrand_in: this.$route.query.hotelbrand_in,
          hotellevel_in: this.$route.query.hotellevel_in,
          enterTime: this.$route.query.enterTime || '',
          leftTime: this.$route.query.leftTime || ''
        }
      })
      this.getFilterData()
    },
    levelTypes (id, index) {
      console.log(this.$refs.level[index].$children[0].isChecked)
      this.level = this.$route.query.hotellevel_in === undefined ? [] : [...(this.$route.query.hotellevel_in)]
      if (this.$refs.level[index].$children[0].isChecked === false) {
        console.log(this.$route.query.hotellevel_in)
        this.level.unshift(id)
      } else if (this.$refs.level[index].$children[0].isChecked === true) {
        this.level = this.level.filter(v => +v !== +id)
      }
      this.$router.push({
        path: '/hotel',
        query: {
          cityName: this.$route.query.cityName,
          price_lt: this.$route.query.price,
          hotellevel_in: this.level,
          hoteltype_in: this.$route.query.hoteltype_in,
          hotelasset_in: this.$route.query.hotelasset_in,
          hotelbrand_in: this.$route.query.hotelbrand_in,
          enterTime: this.$route.query.enterTime || '',
          leftTime: this.$route.query.leftTime || ''
        }
      })
    },
    typechange (id, index) {
      this.level = this.$route.query.hoteltype_in === undefined ? [] : [...(this.$route.query.hoteltype_in)]
      if (this.$refs.type[index].$children[0].isChecked === false) {
        this.type.unshift(id)
      } else if (this.$refs.type[index].$children[0].isChecked === true) {
        this.type = this.type.filter(v => +v !== +id)
      }

      this.$router.push({
        path: '/hotel',
        query: {
          cityName: this.$route.query.cityName,
          price_lt: this.$route.query.price,
          hoteltype_in: this.type,
          hotellevel_in: this.$route.query.hotellevel_in,
          hotelasset_in: this.$route.query.hotelasset_in,
          hotelbrand_in: this.$route.query.hotelbrand_in,
          enterTime: this.$route.query.enterTime || '',
          leftTime: this.$route.query.leftTime || ''
        }
      })
    },
    assetschange (id, index) {
      this.level = this.$route.query.hotelasset_in === undefined ? [] : [...(this.$route.query.hotelasset_in)]
      if (this.$refs.asset[index].$children[0].isChecked === false) {
        this.assets.unshift(id)
      } else if (this.$refs.asset[index].$children[0].isChecked === true) {
        this.assets = this.assets.filter(v => +v !== +id)
      }
      this.$router.push({
        path: '/hotel',
        query: {
          cityName: this.$route.query.cityName,
          price_lt: this.$route.query.price,
          hotelasset_in: this.assets,
          hoteltype_in: this.$route.query.hoteltype_in,
          hotellevel_in: this.$route.query.hotellevel_in,
          hotelbrand_in: this.$route.query.hotelbrand_in,
          enterTime: this.$route.query.enterTime || '',
          leftTime: this.$route.query.leftTime || ''
        }
      })
    },
    brandschange (id, index) {
      this.level = this.$route.query.hotelasset_in === undefined ? [] : [...(this.$route.query.hotelasset_in)]
      if (this.$refs.brand[index].$children[0].isChecked === false) {
        this.brands.unshift(id)
      } else if (this.$refs.brand[index].$children[0].isChecked === true) {
        this.brands = this.brands.filter(v => +v !== +id)
      }
      this.$router.push({
        path: '/hotel',
        query: {
          cityName: this.$route.query.cityName,
          price_lt: this.$route.query.price,
          hoteltype_in: this.$route.query.hoteltype_in,
          hotelasset_in: this.$route.query.hotelasset_in,
          hotellevel_in: this.$route.query.hotellevel_in,
          hotelbrand_in: this.brands,
          enterTime: this.$route.query.enterTime || '',
          leftTime: this.$route.query.leftTime || ''
        }
      })
    },
    getFilterData () {
      this.$http.get('/hotels/options').then(res => {
        const { data } = res.data
        this.filterArrays = data
        this.filterArrays.levels = data.levels
        this.filterInit(data)
      })
    }
  },
  mounted () {
    this.getFilterData()
  },
  watch: {
    $route (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="less" scoped>
.filter {
  width: 100%;
  .el-col {
    border: 1px solid #eee;
    border-left: 0;
    padding: 2px;
    &:nth-child(1){
      border-left:1px solid #eee;
    }
    .el-slider {
      width: 80%;
    }
    .el-dropdown{
        width: 100%;
        .el-dropdown-link{
            display: block;
            width: 100%;
            position: relative;
            .el-icon--right{
                position: absolute;
                right: 0;
                top: 3px;
            }
        }
        .el-dropdown-item{
                width: 100%;
         }

    }
  }
}
.el-dropdown-menu{
  height: 200px;
  overflow-y: scroll;
  .el-dropdown-menu__item{
      width: 150px;
    /deep/.el-checkbox__label{
           width: 110px;
    }
  }
}

</style>
